<template>
  <div class="allHot">
    <p style="text-align: left; text-indent: .2rem;margin-bottom: .2rem;">全部直播
        <span style="float:right;margin-right:.2rem;" @click="many">更多</span>
    </p>
    <ul>
      <li v-for="(item, i) in allList" :key="i">
        <img :src="item.roomSrc" alt="" />
        <p class="title">
          {{ item.roomName }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    allList: {
      type: Array,
      defalut: () => {
        return [];
      },
    },
  },
  methods: {
      many() {
          this.$emit('many')
      }
  }
};
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  li {
    width: 50%;
    height: 2rem;
    padding-bottom: .8rem;
    img {
      width: 3.6rem;
      border-radius: 0.2rem;
    }
    .title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        font-size: .28rem;
        text-align: left;
    }
  }
}
</style>